<template>
    <el-card>
        <el-form >
            <el-row :gutter="10">
                <!-- 市-->
                <el-col :span=6 >
                    <el-form-item label="所在市:"  >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.city"
                                no-data-text="请选择省/自治区"
                                @change="selection('1', $event)"
                                placeholder="请选择市"
                        >
                            <el-option
                                    v-for="item in dropdowns.city"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--    县-->
                <el-col :span=6 >
                    <el-form-item label="所在县:"  >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.county"
                                no-data-text="请选择市/区"
                                @change="selection('2', $event)"
                                placeholder="请选择县"
                        >
                            <el-option
                                    v-for="item in dropdowns.county"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--  乡-->
                <el-col :span=6 >
                    <el-form-item label="所在乡:" >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.town"
                                no-data-text="请选择区/县"
                                @change="selection('3', $event)"
                                placeholder="请选择乡"
                        >
                            <el-option
                                    v-for="item in dropdowns.town"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--村-->
                <el-col :span=6 >
                    <el-form-item label="所在村:">
                        <el-select
                                clearable
                                filterable
                                no-data-text="请选择乡"
                                v-model="forms.village"
                                @change="selection('4', $event)"
                                placeholder="请选择村"
                        >
                            <el-option
                                    v-for="item in dropdowns.village"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


            </el-row>
            <el-row>
                <el-button  type="success"  style="margin-left: 20px;" @click="search">搜索</el-button>
                <el-button  type="primary"  style="margin-left: 50px;" @click="reset">重置</el-button>
            </el-row>
        </el-form>
    </el-card>
    <el-card class="myecharts">
        <el-row style="height: 400px;margin-left: 70px">

            <BarChart :yData="barData" :xData="xdata" :chartTitle="'处理情况分析'"></BarChart>
        </el-row>
        <el-row style="height: 650px;margin-left: 70px">
            <PieChart :data="pieData" :chartTitle="'处理情况分析'"></PieChart>
        </el-row>
    </el-card>

</template>

<script setup>
    import { ref, reactive, onMounted} from 'vue';
    import allData from '../../assets/json/village.json';
    import {defineProps} from "@vue/runtime-core"; //
    import {searchState} from "../../api/applypoor";
    //图一
    //导入图
    import BarChart from './clue/BarChart.vue'
    import PieChart from './clue/PieChart.vue'
    //风险等级横坐标
    const xdata=['已驳回','待村级审核','待乡级审核','待县级审核','待市级审核','待省级审核','待帮扶','帮扶完成']
    //纵坐标
    //贫困人数
    const barData=reactive([])

    const pieData= reactive([])

    //表格选择
    // Props定义
    const props = defineProps({
        labelWidth: {
            type: Number,
            default: 80,
        },
        showRemark: {
            type: Boolean,
            default: false,
        },
        col: {
            type: Number,
            default: 6,
        },
        data: {
            type: Object,
            default: {}
        },
    });

    // State定义
    const dropdowns = reactive({
        city: [],
        county: [],
        town: [],
        village: [],
    });
    const forms = reactive({
        city: "",
        county: "",
        town: "",
        village: "",


    });

    //后端查询的表单数据
    const searchForm=reactive({
        cityName: "",
        countyName: "",
        townName: "",
        villageName: "",
        state:''
    })



    onMounted(() => {
        selection("0", "1");
        console.log(forms)
        myPage()
    });


    //根据编号找其下属行政区域
    const findItem = (data, targetCode) => {
        for (const item of data) {
            if (item.value === targetCode) {
                return item.children;
            }
            if (item.children && item.children.length) {
                const found = findItem(item.children, targetCode);
                if (found) return found;
            }
        }
        return null;
    };

    // 根据value查找label
    const findLabelByValue = (data,targetValue ) => {
        for (const item of data) {
            if (item.value === targetValue) {
                return item.label;
            }
            if (item.children&& item.children.length) {
                const foundLabel = findLabelByValue(item.children,targetValue);
                if (foundLabel) {
                    return foundLabel;
                }
            }
        }
        return null;
    };

    // 新政区域选择方法定义
    const selection = (level, code) => {
        console.log("选择变化");
        console.log(level, code);

        let cityData=allData;
        switch (level) {
            /* 渲染所有的市*/
            case "0":
                dropdowns.city = cityData;
                break;
            case "1":
                /*选择市渲染省*/
                let countyData=findItem(cityData,code)
                console.log('县')
                console.log(countyData)
                dropdowns.county = countyData;
                dropdowns.town = [];
                dropdowns.village = [];
                forms.county = "";
                forms.town = "";
                forms.village = "";
                searchForm.countyName='';
                searchForm.townName='';
                searchForm.villageName='';
                console.log("选择的市是：")
                console.log( forms)
                searchForm.cityName= findLabelByValue(cityData,forms.city)
                console.log(searchForm)

                break;
            case "2":
                /* 选择县渲染乡*/

                let townData=findItem(cityData,code)
                console.log('乡')
                console.log(townData)
                dropdowns.town = townData;
                dropdowns.village = [];
                forms.town = "";
                forms.village = "";
                searchForm.townName='';
                searchForm.villageName='';
                console.log("选择的县是：")
                console.log(forms)
                searchForm.countyName= findLabelByValue(cityData,forms.county)
                console.log(searchForm)
                break;
            case "3":
                /* 选择乡渲染村*/
                let villageData=findItem(cityData,code)
                console.log('村')
                console.log(villageData);
                dropdowns.village = villageData;
                forms.village = "";
                searchForm.villageName='';
                console.log("选择的乡是：")
                console.log(forms)
                searchForm.townName= findLabelByValue(cityData,forms.town)
                console.log(searchForm)
                break;
            case "4":
                /*选择村*/
                console.log("选择的村是：")
                console.log(forms)
                searchForm.villageName= findLabelByValue(cityData,forms.village)
                console.log(searchForm)
                break;


        }
    };


    //提交
    const search=()=>{
        console.log("Submitting:000000000000000000000000000000")
        console.log("Submitting:", searchForm);
        console.log("Submitting:000000000000000000000000000000")
        myPage()
    }

    //重置
    const reset=()=>{
        forms.city=''
        forms.county=''
        forms.town=''
        forms.village=''
        searchForm.cityName=''
        searchForm.countyName=''
        searchForm.townName=''
        searchForm.villageName=''
        myPage()
    }
    const myPage=async()=>{
        barData.length=0
        pieData.length=0
        for(let i=0;i<=7;i++){
            getState(i)
        }

    }

    const getState=async(state)=>{
        searchForm.state=state+""
        searchState(searchForm).then((res) => {

            console.log("查询的状态")
            console.log(res.data)
            console.log("查询的状态")
            barData.push(res.data.length)
            if(state==0){
                pieData.push({name:"已驳回",value:res.data.length})
            }else if(state==1){
                pieData.push({name:"待村级审核",value:res.data.length})
            } else if(state==2){
                pieData.push({name:"待乡级审核",value:res.data.length})
            }else if(state==3){
                pieData.push({name:"待县级审核",value:res.data.length})
            }else if(state==4){
                pieData.push({name:"待市级审核",value:res.data.length})
            }else if(state==5){
                pieData.push({name:"待省级审核",value:res.data.length})
            }else if(state==6){
                pieData.push({name:"待帮扶",value:res.data.length})
            }else if(state==7){
                pieData.push({name:"帮扶完成",value:res.data.length})
            }
        })
    }

</script>

<style lang="less" scoped>
    /deep/.specific {
        .el-form-item__content {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            justify-content: space-between;
            &::after,
            &::before {
                display: none;
            }
        }
    }

    .myecharts{
        background-color: #ecf5ff;
        height:1050px;
        margin-top: 25px;
    }
</style>
